<template>
  <view class="con">
    <image src="@/static/logo.png" />
    <!-- 登录 -->
    <view class="login-form">
      <view :class="['item',errorTips==1? 'error':'']">
        <view class="account">
          <text class="input-item">
            账号
          </text>
          <input type="text" data-type="account"  placeholder="请输入注册时的手机号"
            @input="getInputVal">
        </view>
        <view v-if="errorTips==1" class="error-text">
          <text class="warning-icon">
            !
          </text>
          请输入正确的手机号！
        </view>
      </view>
      <view :class="['item',errorTips==2? 'error':'']">
        <view class="account">
          <text class="input-item">
            密码
          </text>
          <input password="true" type="password" data-type="password"  placeholder="请输入密码"
            @input="getInputVal">
        </view>
        <view v-if="errorTips==2" class="error-text">
          <text class="warning-icon">
            !
          </text>
          请输入密码！
        </view>
      </view>
      <view :class="['item',errorTips==3? 'error':'']">
        <uni-captcha scene="login" v-model="loginCaptchaCode"></uni-captcha>
        <view v-if="errorTips==3" class="error-text">
          <text class="warning-icon">
            !
          </text>
          请输入正确的验证码！
        </view>
      </view>
      <view class="operate">
        <view class="to-register" @tap="toRegitser">
          还没有账号？
          <text>去注册></text>
        </view>
      </view>
    </view>

    <view>
      <button class="authorized-btn" @tap="loginVerify">
        登录
      </button>
      <button class="to-idx-btn" @tap="toIndex">
        回到首页
      </button>
    </view>
  </view>
</template>

<script setup>
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: '用户登录'
    })
  })

  const principal = ref('') // 账号
  const errorTips = ref(0) // 错误提示
  watch(
    () => principal.value,
    () => {
      errorTips.value = 0
    }
  )

  const credentials = ref('') // 密码
  /**
   * 输入框的值
   */
  const getInputVal = (e) => {
    const type = e.currentTarget.dataset.type
    if (type == 'account') {
      principal.value = e.detail.value
    } else if (type == 'password') {
      credentials.value = e.detail.value
    }
  }

  const loginCaptchaCode = ref('') //图形验证码
  const myObj = uniCloud.importObject('myUniCloudObj')
  const unicaptcha=uniCloud.importObject('uni-captcha')

  const verifyCaptchaCode = async() => {
    let bo=false
   await myObj.uniVerifyCaptchaCode("login", loginCaptchaCode.value).then(res => {
      console.log(res)
      console.log("验证码是否正确");
      if (res.code == 0) {
        console.log("验证码正确");
        bo=true
      } else {
        console.log("验证码错误");
        errorTips.value=3
        bo=false
      }
    })
    console.log("返回验证码验证结果");
    console.log(bo);
    return bo

  }

  const login = async() => {
    http.request({
        url: '/login',
        method: 'post',
        data: {
          username: principal.value,
          password: credentials.value
        }
      })
      .then(({
        data
      }) => {
        console.log("登录结果");
        console.log(data);
        http.loginSuccess(data, () => {
          //存储当前用户
          uni.showToast({
            title: '登录成功',
            icon: 'none',
            complete: () => {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 1000)
            }
          })
        })
      })}


  /**
   * 登录校验
   */
  const loginVerify = () => {
    console.log(loginCaptchaCode.value.length);
    console.log(loginCaptchaCode.value.length < 3);
    if (principal.value.length == 0) {
      errorTips.value = 1
    } else if (credentials.value.length == 0) {
      errorTips.value = 2
    } else if (loginCaptchaCode.value.length < 4) {
      errorTips.value = 3
    } else{
      myObj.uniVerifyCaptchaCode("login", loginCaptchaCode.value)
      .then(res => {
        console.log(res)
        console.log("验证码是否正确");
        if (res.code == 0) {
          errorTips.value = 0
          login()
        }else{
          errorTips.value=3
        }
      })
      .catch(err => {
        console.log(err)
      })
    }
  }

  /**
   * 去注册
   */
  const toRegitser = () => {
    uni.navigateTo({
      url: '/pages/register/register'
    })
  }

  /**
   * 回到首页
   */
  const toIndex = () => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
</script>

<style scoped lang="scss">
  @import "./accountLogin.scss";
</style>
